<div id="logDiv" class="login_wrapper">
    <div class="animate form login_form">
        <section class="login_content">
            <form action="javascript:void(0);">
                <h1>Login</h1>
                <div>
                    <input v-model="user.userName" type="text" class="form-control" placeholder="Username" required=""/>
                </div>
                <div>
                    <input v-model="user.password" type="password" class="form-control" placeholder="Password"
                           required=""/>
                </div>

                <!--verified code-->
                <div>
                    <input
                            class="form-control input-val"
                            type="text"
                            v-model="inputNum"
                            placeholder="请输入验证码（不区分大小写）"
                            style="float: left; width: 65%; margin-bottom: 0px"
                    />
                    <canvas id="canvas" @click="draw()" width="100" height="36"></canvas>
                </div>
                <!--end-->

                <div>
                    <a @click="login()" class="btn btn-default submit" href="javascript:void(0);">Log in</a>
                    <a class="reset_pass" href="#">Lost your password?</a>
                </div>

                <div class="clearfix"></div>

                <div class="separator">
                    <p class="change_link">New to site?
                        <a href="/register" class="to_register"> Create Account </a>
                    </p>

                    <div class="clearfix"></div>
                    <br/>

                    <div>
                        <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
                        <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and
                            Terms</p>
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>

<script>
    new Vue({
            el: "#logDiv",
            data: {
                user: {
                    userName: "",
                    password: "",
                },
                inputNum:"",
                showNum:[],


            },
            methods: {
                login: function () {
                    if (this.user.userName == "" || this.user.password == "") {
                        console.log("no");
                        return;
                    }
                    // if(this.inputNum==""||this.inputNum!=this.showNum.join("")){//数组转字符串
                    //     alert("验证码错误或未输入！");
                    //     return;
                    // }
                    $.ajax({
                        url: "/api/userIdentity",
                        type: "post",
                        data: JSON.stringify(this.user),
                        contentType: "application/json",
                        success: function (data) {
                            if (data.status == 500) {
                                console.log("no");
                            } else {
                                location.href = "/test/vueTest";
                            }
                        }

                    })
                },
                draw: function () {
                    var canvas_width = $("#canvas").width();
                    var canvas_height = $("#canvas").height();
                    var canvas = document.getElementById("canvas"); //获取到canvas的对象
                    var context = canvas.getContext("2d"); //获取到canvas画图的环境
                    canvas.width = canvas_width;
                    canvas.height = canvas_height;
                    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                    var aCode = sCode.split(",");
                    var aLength = aCode.length; //获取到数组的长度

                    for (var i = 0; i <= 3; i++) {
                        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
                        var txt = aCode[j]; //得到随机的一个内容
                        this.showNum[i] = txt.toLowerCase();
                        var x = 10 + i * 20; //文字在canvas上的x坐标
                        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                        context.font = "bold 23px 微软雅黑";

                        context.translate(x, y);
                        context.rotate(deg);

                        context.fillStyle = this.randomColor();
                        context.fillText(txt, 0, 0);

                        context.rotate(-deg);
                        context.translate(-x, -y);
                    }
                    for (var i = 0; i <= 5; i++) {
                        //验证码上显示线条
                        context.strokeStyle = this.randomColor();
                        context.beginPath();
                        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                        context.stroke();
                    }
                    for (var i = 0; i <= 30; i++) {
                        //验证码上显示小点
                        context.strokeStyle = this.randomColor();
                        context.beginPath();
                        var x = Math.random() * canvas_width;
                        var y = Math.random() * canvas_height;
                        context.moveTo(x, y);
                        context.lineTo(x + 1, y + 1);
                        context.stroke();
                    }
                },
                randomColor: function () {
                    var r = Math.floor(Math.random() * 256);
                    var g = Math.floor(Math.random() * 256);
                    var b = Math.floor(Math.random() * 256);
                    return "rgb(" + r + "," + g + "," + b + ")";
                },
            },
            mounted() {//页面被初始化完成时vue使用挂载生命周期
                this.draw();
            },

        })


</script>
